<template>
  <div class="tag-index ">
      <div class="tag-section">
          <aside class="common-aside">
            <div class="top-tools">
                <el-button size="small" @click="addCate">新增</el-button> 
                <el-button size="small" @click="editCate">编辑</el-button> 
                <el-button size="small" @click="delCate">删除</el-button> 
            </div>
            <div class="tree-box">
                
            </div>
            <div class="add-btn" @click="addTag"> 新建组件物料</div>
        </aside>
        <section class="common-section">
            <div class="common-section-header">
                <div>
                    <el-button size="small" @click="enableCheck">启用</el-button>
                    <el-button size="small" @click="disableCheck">禁用</el-button>
                    <!-- <el-button size="small">加入分类</el-button>
                    <el-button size="small">清空分类</el-button>
                    <el-button size="small">复制</el-button> -->
                    <el-button size="small" @click="allCheck">全选</el-button>
                    <el-button size="small" @click="delCheck">删除</el-button>
                </div>
                <div class="search-wrapper">
                    <input class="search-input" v-model="searchKeyword" @keyup.enter="doSearch" />
                    <el-button size="small" slot="append" @click="doSearch">搜索</el-button>
                </div>
            </div>
            <div class="common-section-container">
                <div class="c-s-container-top">
                    <section-grid ref="grid" v-model="tagData" @upload-check="uploadTagCheck"  @del-click="handlerTagDel" @edit-click="handlerTagEdit"></section-grid>
                </div>
                <div class="c-s-container-footer">
                    <el-pagination
                        :page-size="pageSize"
                        :current-page="currentPage"
                        :total="total"
                        @current-change="currentChange"
                    ></el-pagination>
                </div>
                
            </div>
        </section>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tagTypes: [
                {
                    name: '基础组件',
                    type: 'basic'
                },
                {
                    name: '业务组件',
                    type: 'business'
                },
            ],
            tagType: 'basic',
            tagData: [],
            searchKeyword: '',

            pageSize: 20,
            currentPage: 1,
            total: 0
        }
    },

    methods: {
        
        toggleTagType(data){
            this.tagType = data.type;
        },

        addCate(){

        },

        editCate(){

        },

        delCate(){

        },

        addTag(){

        },

        enableCheck(){

        },

        disableCheck(){

        },

        allCheck(){

        },

        delCheck(){

        },

        doSearch(){

        },

        uploadTagCheck(){

        },

        handlerTagDel(){

        },

        handlerTagEdit(){
            
        },

        currentChange(i){
            this.currentPage = i;
        }

    }
}
</script>

<style>
    .tag-index {
        height: 100%;   
    }

    .tag-header {
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        box-sizing: border-box;
        border-bottom: 3px solid #2696e0;
    }

    .tag-type-item {
        height: 36px;
        border: 1px solid #2696e0;
        box-sizing: border-box;
        width: 160px;
        text-align: center;
        line-height: 36px;
        color: #222;
        cursor: pointer;
    }

    .tag-type-item:hover {
        background-color: #2696e0cc;
        color: #fff;
    }
    .tag-type-item.active {
        background-color: #2696e0;
        color: #fff;
    }

    .tag-section {
        display: flex;
        height: 100%;
    }
</style>